<template>
  <div class="topic-tree">
    <a-tree
      :selectedKeys="selectedKeys"
      show-line
      show-icon
      :load-data="onLoadData"
      :tree-data="treeData"
      @select="onSelect"
    >
      <template #icon="{ level }">
        <template v-if="level == 3">
          <span class="iconify" data-icon="carbon:dot-mark"></span>
        </template>
      </template>
      <template #switcherIcon="{ switcherCls }">
        <down-outlined :class="switcherCls" />
      </template>
    </a-tree>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, getCurrentInstance, computed } from 'vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  import { sjList, getTopics, sjListByUserId } from '/@/api/qualityInspection';
  import { useUserStore } from '/@/store/modules/user';
  const userStore = useUserStore();
  const userInfo = computed(() => userStore.getUserInfo);
  let { proxy } = getCurrentInstance();
  const { mittBus } = proxy;
  const selectedKeys = ref([]);
  const treeData = ref<any>([]);
  // 获取父级的数组
  const getParentTreedata = async (_condition?: string) => {
    const params = {
      km: userInfo.value.userType == 3 ? userInfo.value.km : null,
      kmmc: _condition,
      userId: userInfo.value.userType == '7' ? userInfo.value.userId : undefined,
    };
    const { code, data } = await (userInfo.value.userType == '7'
      ? sjListByUserId(params)
      : sjList(params));
    if (code == 1) {
      treeData.value = data;
      treeData.value.forEach((item) => {
        if (item.isLeaf == 'true') {
          item.isLeaf = false;
        } else {
          item.isLeaf = true;
        }
      });
    }
  };
  // 动态加载子级题型
  const onLoadData = (treeNode: any) => {
    return new Promise((resolve: (value?: unknown) => void, reject: (value?: unknown) => void) => {
      getTopics({ km: treeNode.km, parentId: treeNode.id || null }).then((res) => {
        if (res.code == 1) {
          if (res.data && res.data.length) {
            res.data.forEach((item) => {
              if (item.isLeaf == 'true') {
                item.isLeaf = false;
              } else {
                item.isLeaf = true;
              }
            });
          }
          treeNode.dataRef.children = res.data;
          treeData.value = [...treeData.value];
          resolve();
        }
      });
    });
  };

  const onSelect = (treeNode: any, e) => {
    if (treeNode.length) {
      selectedKeys.value = treeNode;
    }
    mittBus.emit('back');
    // 点击题型，获取到这个题型的评阅情况
    mittBus.emit('selectTreeItems', e);
  };
  onMounted(() => {
    // expandedKeys.value = window.localStorage.getItem('expandedKeys')
    getParentTreedata();
  });

  defineExpose({
    actions: {
      getTree: (val) => getParentTreedata(val),
    },
  });
</script>
<style lang="less" scoped>
  .topic-tree {
    :deep(.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected) {
      color: #136cc4;
      background: transparent;
    }

    :global(.ant-tree-switcher-noop) {
      display: none;
    }

    :global(.ant-tree-node-content-wrapper) {
      display: flex !important;
      align-items: center;
    }

    :global(.ant-tree-iconEle) {
      height: 16px !important;
    }

    .topic-tree {
      padding: 16px 0;
    }
  }
</style>
